﻿<!--author:adminj-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AdminJ FormDesigner</title>
    <link rel="stylesheet" href="/static/adminj/libs/layui/css/layui.css?v=1">
    <link rel="stylesheet" href="/static/adminj/libs/select2/css/select2.min.css">
    <script src="/static/adminj/libs/layui/layui.js?2.6.8"></script>
    <script src="/static/adminj/libs/jquery/jquery-3.6.0.min.js"></script>
    <script src="/static/adminj/libs/sortable/sortable.min.js"></script>
    <script src="/static/adminj/libs/sortable/jquery-sortable.js"></script>
    <script src="/static/adminj/libs/select2/js/select2.full.min.js"></script>
    <script src="/static/adminj/libs/ckeditor5/ckeditor.js"></script>

    <script src="/static/adminj/modules/adminj_utils.js"></script>
    <script src="/static/adminj/modules/adminJFormData.js"></script>
    <link href="__ADMIN__/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .row {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: 0px;
        }

        .layui-form-label {
            float: left;
            display: block;
            padding: 9px 15px;
            width: 120px;
            font-weight: 400;
            line-height: 20px;
            text-align: right;
        }
    </style>
</head>

<body>
<form action="browse.jsp" method="post" target="_blank id=">
    <input type="hidden" name="resHtml" id="resHtml"/>
    <input type="submit" name="button" id="submitHtml" value="提交" style="display: none;"/>
</form>

<div class="layui-form">
    <div class="adminj-ds-top-right">
        <button type="button" class="layui-btn layui-btn-sm" lay-filter="export" id="exportForm">
            <i class="layui-icon layui-icon-download-circle" style="font-size: 1.2em"></i> 导出表单HTML代码
        </button>
        <button type="button" class="layui-btn layui-btn-sm" lay-filter="exportFormPhp" id="exportFormPhp">
            <i class="layui-icon layui-icon-download-circle" style="font-size: 1.2em"></i> 导出表单PHP代码
        </button>
        <button type="button" class="layui-btn layui-btn-sm" lay-filter="exportList" id="exportList">
            <i class="layui-icon layui-icon-download-circle" style="font-size: 1.2em"></i> 导出列表HTML代码
        </button>
        <button type="button" class="layui-btn layui-btn-sm" lay-filter="exportPhpList" id="exportPhpList">
            <i class="layui-icon layui-icon-download-circle" style="font-size: 1.2em"></i> 导出列表Php代码
        </button>
        <button type="button" class="layui-btn layui-btn-sm" lay-filter="exportJSON" id="exportJSON">
            <i class="layui-icon layui-icon-download-circle" style="font-size: 1.2em"></i> 导出JSON
        </button>
        <button type="button" class="layui-btn layui-btn-sm" lay-filter="itemJson" id="itemJson">
            <i class="layui-icon layui-icon-download-circle" style="font-size: 1.2em"></i> 当前选择项JSON
        </button>
        <button type="button" class="layui-btn layui-btn-sm" lay-filter="importJSON" id="importJSON">
            <i class="layui-icon layui-icon-upload-drag" style="font-size: 1.2em"></i> 导入JSON
        </button>
        <!--<button type="button" class="layui-btn layui-btn-sm" lay-filter="importHtmlJSON" id="importHtmlJSON">
            <i class="layui-icon layui-icon-upload-drag" style="font-size: 1.2em"></i> 导入HTML JSON
        </button>-->
        <!--<button type="button" class="layui-btn layui-btn-sm" lay-filter="browseResult" id="browseResult">
            <i class="layui-icon layui-icon-website" style="font-size: 1.2em"></i> 预览
        </button>-->
    </div>
</div>

<div id='adminJLayuiFormRender'></div>

</body>

</html>


<script>
    //显示有textarea的弹出层
    function showLayerTextarea(val) {
        layui.layer.open({
            type: 1,
            closeBtn: 1,
            shadeClose: true,
            area: ['80%', '90%'],
            content: '<textarea id="outprint_textarea" style="width: 98%;height: 97%; margin-left: 1%;margin-top: 1%;"></textarea>',//'+val+'
            success: function (layero, index) {
                $('#outprint_textarea').text(val);
            }
        });
    }

    //导入json
    function showImportLayerTextarea(formRender, type) {
        var that = this;
        layui.layer.open({
            type: 1,
            closeBtn: 1,
            shadeClose: true,
            area: ['80%', '90%'],
            content: '<textarea id="outprint_textarea" style="width: 98%;height: 97%; margin-left: 1%;margin-top: 1%;"></textarea>'
            , btn: ['确定', '取消']
            , yes: function (index, layero) {
                if (type == 'htmlJSON') {
                    formRender.importHtmlJSON($('#outprint_textarea').val());
                } else {
                    formRender.importJSON($('#outprint_textarea').val());
                }
                layui.layer.close(index);
            }, btn2: function (index, layero) {
            }
        });
    }


    layui.config({
        //dir: '/res/layui/'
        version: false
        , debug: false
        , base: './adminj/modules/'
    }).use(['adminJLayuiFormRender'], function () {
        var formRender = layui.adminJLayuiFormRender;
        formRender.render({id: 'adminJLayuiFormRender'});
        $ = layui.$

        try {
            $('#importHtmlJSON').mouseenter(function () {
                layui.layer.tips('导出HTML代码里_json的内容', '#importHtmlJSON', {tips: [1, '#3595CC'],})
            })
            $('#importJSON').mouseenter(function () {
                layui.layer.tips('导出JSON的内容', '#importJSON', {tips: [1, '#3595CC'],})
            })

            //导出表单HTML代码
            $('#exportForm').click(function () {
                var html = formRender.exportToHTML();
                showLayerTextarea(html);
            });

            //导出表单PHP代码
            $('#exportFormPhp').click(function () {
                var json = formRender.exportJSON();

                layui.layer.open({
                    type: 1,
                    closeBtn: 1,
                    shadeClose: true,
                    area: ['42%', '48%'],
                    content: '' +
                      '<div style="padding: 10px">' +
                      '<input type="text" style="margin-bottom: 10px" class="form-control col-sm-12 submit_table" placeholder="请输入不带前缀的表名">' +
                      '<input type="text" class="form-control col-sm-12 submit_action" placeholder="请输入表单提交地址">' +
                      '<div style="font-size: 12px; color: #009688; margin-bottom: 10px;margin-left: 12px">表单提交地址：会自动生成 新增/编辑 方法名及代码，例：goods会自动生成成doGoods</div>' +
                      '<input type="text" class="form-control col-sm-12 submit_title" placeholder="请输入标题">' +
                      '<div style="font-size: 12px; color: #009688; margin-bottom: 10px;margin-left: 12px">标题：例：商品，输出的为：新增/编辑 商品</div>' +
                      '<input type="text" style="margin-bottom: 10px" class="form-control col-sm-12 submit_url" placeholder="保存后跳转地址；直接填写:url()的url参数即可">' +
                      '</div>',
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        var table = $('.submit_table').val();
                        var action = $('.submit_action').val();
                        var title = $('.submit_title').val();
                        var url = $('.submit_url').val();

                        if (!table) {
                            layer.msg('请输入表名');
                            return;
                        }
                        if (!action) {
                            layer.msg('请输入表单提交地址');
                            return;
                        }
                        if (!title) {
                            layer.msg('请输入标题');
                            return;
                        }

                        $.post("{:url('getDoCode')}", {
                            table: table,
                            action: action,
                            title: title,
                            url: url,
                            json: json
                        }, function (php) {
                            showLayerTextarea(php);
                        }, 'json');
                    }, btn2: function (index, layero) {
                    }
                });
            });

            // 导出列表HTML代码
            $('#exportList').click(function () {
                var json = formRender.exportJSON();

                layui.layer.open({
                    type: 1,
                    closeBtn: 1,
                    shadeClose: true,
                    area: ['42%', '48%'],
                    content: '' +
                      '<div style="padding: 10px">' +
                      '<input type="text" class="form-control col-sm-12 list_action" placeholder="请输入列表地址">' +
                      '<div style="font-size: 12px; color: #009688; margin-bottom: 10px;margin-left: 12px">列表地址：会自动生成 列表 方法名及代码，例：goods会自动生成goodsList</div>' +
                      '</div>',
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        var action = $('.list_action').val();

                        if (!action) {
                            layer.msg('请输入列表地址');
                            return;
                        }

                        $.post("{:url('getListHtmlCode')}", {
                            action: action,
                            json: json
                        }, function (php) {
                            showLayerTextarea(php);
                        }, 'json');
                    }, btn2: function (index, layero) {
                    }
                });
            })

            // 导出列表PHP代码
            $('#exportPhpList').click(function () {
                var json = formRender.exportJSON();

                layui.layer.open({
                    type: 1,
                    closeBtn: 1,
                    shadeClose: true,
                    area: ['42%', '48%'],
                    content: '' +
                      '<div style="padding: 10px">' +
                      '<input type="text" style="margin-bottom: 10px" class="form-control col-sm-12 list_table" placeholder="请输入不带前缀的表名">' +
                      '<input type="text" class="form-control col-sm-12 list_action" placeholder="请输入列表地址">' +
                      '<div style="font-size: 12px; color: #009688; margin-bottom: 10px;margin-left: 12px">列表地址：会自动生成 列表 方法名及代码，例：goods会自动生成goodsList</div>' +
                      '<input type="text" class="form-control col-sm-12 list_title" placeholder="请输入标题">' +
                      '<div style="font-size: 12px; color: #009688; margin-bottom: 10px;margin-left: 12px">标题：例：商品，输出：商品列表</div>' +
                      '</div>',
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        var table = $('.list_table').val();
                        var action = $('.list_action').val();
                        var title = $('.list_title').val();

                        if (!table) {
                            layer.msg('请输入表名');
                            return;
                        }
                        if (!action) {
                            layer.msg('请输入列表地址');
                            return;
                        }
                        if (!title) {
                            layer.msg('请输入标题');
                            return;
                        }

                        $.post("{:url('getListPhpCode')}", {
                            table: table,
                            action: action,
                            title: title,
                            json: json
                        }, function (php) {
                            showLayerTextarea(php);
                        }, 'json');
                    }, btn2: function (index, layero) {
                    }
                });
            })

            //导入JSON
            $('#importJSON').click(function () {
                showImportLayerTextarea(formRender, '');
            })

            // 导入HTML JSON
            $('#importHtmlJSON').click(function () {
                showImportLayerTextarea(formRender, 'htmlJSON');
            })

            // 当前选中项JSON
            $('#itemJson').click(function () {
                var json = '';
                $('#sortable').find('.adminj-select-sort-item').each(function (i, e) {
                    var divId = $(this).attr('id');
                    json = JSON.stringify(formRender.propertiesMap[divId]);
                });
                showLayerTextarea(json);

            });

            // 导出JSON
            $('#exportJSON').click(function () {
                var json = formRender.exportJSON();
                showLayerTextarea(json);
            })

            // 预览
            $('#browseResult').click(function () {
                var res = formRender.exportToHTML();
                $('#resHtml').val(res);
                $('#submitHtml').trigger('click');
            })

            var winHeight = $(window).height() - 10;
            if ($('.adminj-ds-center').height() < winHeight) {
                $('.adminj-ds-center').css('min-height', winHeight - $('.adminj-ds-center').css('top'))
            }

        } catch (e) {
            alert("error:" + e)
        }

    });

    var text_compont = `{$text_compont}`;
    var hidden_compont = `{$hidden_compont}`;
    var password_compont = `{$password_compont}`;
    var textarea_compont = `{$textarea_compont}`;
    var date_compont = `{$date_compont}`;
    var switch_compont = `{$switch_compont}`;
    var select_compont = `{$select_compont}`;
    var select2_compont = `{$select2_compont}`;
    var radio_compont = `{$radio_compont}`;
    var checkbox_compont = `{$checkbox_compont}`;
    var dateRange_compont = `{$dateRange_compont}`;
    var editor_compont = `{$editor_compont}`;
    var uploadImage_compont = `{$uploadImage_compont}`;
    var uploadImages_compont = `{$uploadImages_compont}`;
    var submitData_compont = `{$submitData_compont}`;
</script>